<template>
    <div class="number-of-orders-in-the-past-seven-days-box">
      <visualEchart :option="option"/>
    </div>
  </template>
  <script>
    import * as echarts from 'echarts'
    import visualEchart from '../../vue/visual-echart'
    export default {
      components: { visualEchart },
      props: {
        data: {
            type: [Object, Array],
            default: ()=>({})
        }
      },
      data() {
        return {
            option: {
                color:['#36A8FF','#00F4AE','#FFD547','#36F1FF','#FF7C47','#A947FF','#5647FF','#DF4D42','#F987F7'],
                grid: {
                    top: '42px',
                    left: '1%',
                    right: '1%',
                    bottom: '0',
                    containLabel: true,
                },
                tooltip: {},
                legend: {
                    show: false,
                    textStyle: {
                        fontSize: 12,
                        color: '#BCE0FF',
                    },
                },
                xAxis: {
                    axisLine: {
                        lineStyle: {
                            color: '#BCE0FF',
                        },
                    },
                    data: [],
                },
                yAxis: {
                    name: '',
                    axisLine: {
                        lineStyle: {
                        color: '#BCE0FF',
                        },
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                        fontSize: 14,
                        },
                    },
                    splitLine: {
                        lineStyle: {
                        color: 'rgba(217, 231, 255, 0.12)',
                        },
                    },
                },
                series: [
                    {
                        name: 'Sale',
                        type: 'bar',
                        barWidth: 15,
                        itemStyle: {
                            color: '#F2B85D',
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.6, [
                                    { offset: 0, color: '#5BE7FF' },
                                    { offset: 1, color: '#5BE7FF' },
                                ]),
                            },
                        },
                        data: [],
                    },
                ],
            },
        }
      },
      watch: {
            // 深度监听对象
            data: {
                handler(newVal, oldVal) {
                    this.GetData()
                },
                deep: true, // 深度监听
                immediate: true // 立即执行一次
            },
        },
      created() {},
      mounted() {
        this.GetData()
      },
      computed: {},
      methods: {
        // 获取数据信息
        GetData(){
            this.option.xAxis.data = this.data.map(item=> item.day)
            this.option.yAxis.name = `${this.$t('Byname29')}       `
            this.option.series[0].data = this.data.map(item=> item.total)
        }
      },
    }
  </script>
  <style scoped lang="scss">
    .number-of-orders-in-the-past-seven-days-box {
        height: 100%;
        height: 100%;
    }
  </style>
  